<template>
  <el-container>
    <!-- 这是快递派送 -->
    <el-header>
      <el-menu :default-active="activeIndex" class="el-menu-demo"  mode="horizontal" @select="handleSelect">
        <el-menu-item index="1" ><img class="a" src="../tlc/img/快递 (1).png" /></el-menu-item>
        <el-menu-item index="0" class="z"><router-link :underline="false" to="/kdypickup"><span class="zt">首页</span></router-link></el-menu-item>
  
        <div class="dd">快速登录/注册</div>
      </el-menu>

      <div class="line"></div>
    </el-header>

    <el-menu :default-active="activeIndex2" class="wc"  mode="horizontal"  @select="handleSelect" background-color="#324f94"  text-color="#fff" active-text-color="#a0d919" style="width: 100%" >
      <el-menu-item index="4" class="a1"><router-link :underline="false" to="/kdypickup"><img class="a" src="../tlc/img/004-查快递 (1).png" /><span class="zt" >快递员的取件</span ></router-link ><span></span ></el-menu-item>
      <el-menu-item index="4" class="a2"><router-link :underline="false" to="/kdysend" ><img class="a" src="../tlc/img/002-快递箱 (1).png" /><span class="zt" ></span>快递派送</router-link ><span></span ></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdycomputation"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">查看货物是否填写进行计量</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdyworkingRange"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">取派件工作范围</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdyinformation"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">快递员个人信息</span></router-link><span></span></el-menu-item>
    </el-menu>

    <el-tabs v-model="activeName" stretch>
      <el-tab-pane label="快递的派送" name="second" class="boxMainA">
        <el-descriptions
          title="垂直带边框列表"
          direction="vertical"
          :column="4"
          border
        >
          <el-descriptions-item label="用户名"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="手机号"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="居住地" :span="2"
            >苏州市</el-descriptions-item
          >
          <el-descriptions-item label="备注">
            <el-tag size="small">学校</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址"
            >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
          >
        </el-descriptions>

        <el-descriptions
          class="margin-top"
          title="垂直无边框列表"
          :column="4"
          direction="vertical"
        >
          <el-descriptions-item label="用户名"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="手机号"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="居住地" :span="2"
            >苏州市</el-descriptions-item
          >
          <el-descriptions-item label="备注">
            <el-tag size="small">学校</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址"
            >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
          >
        </el-descriptions>
      </el-tab-pane>

      <!-- <el-tab-pane label="干预计划" name="third">
            <div class="aa">
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column
            prop="date"
            label="干预时间">
            <template slot-scope="scope">
              <span>{{scope.row.interposeTime}}</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="name"
            label="干预形式">
            <template slot-scope="scope">
              <span>{{scope.row.interposeShape}}</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="address1"
            label="主要内容">
            <template slot-scope="scope">
              <span>{{scope.row.content}}</span>
            </template>
            </el-table-column>
            
         </el-table>
        </div>
        </el-tab-pane> -->
    </el-tabs>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 蓝色横杠与字的样式
      activeName: "second",
    };
  },
};
</script>

<style scoped>
.w {
  width: 1200px;
  height: 310px;
  position: relative;
  left: 20px;
  margin: -10px auto;
  text-align: center;
}
.z {
  font-size: 18px;
  color: #000;
}
.a1 {
  position: relative;
  left: 130px;
}
.a2 {
  position: relative;
  left: 220px;
}
.a3 {
  position: relative;
  left: 320px;
}
.a4 {
  position: relative;
  left: 440px;
}
.a5 {
  position: relative;
  left: 570px;
}
.el-carousel__item h3 {
  color: #1a200c;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-icon-more {
  text-align: right;
  color: #0b1b0b;
  height: 30%;
}
.dd {
  text-align: right;
}
el-menu-item {
  size: 0cm;
  color: #000;
}
.a {
  margin: -17px auto;
  left: 50%;
}
.el-button {
  line-height: 70px;
  font-size: 17px;
  color: #000;

  width: 260px;
  background-color: #fff;
  border-radius: 4px;
}
.el-container {
  margin: -10px auto;
  margin-left: -10px;
  margin-right: -10px;
}
.el-header,
.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
  border-radius: 4px;
}

.el-aside {
  background-color: #dee0e4;
  color: #333;
  text-align: center;
  line-height: 200px;
  border-radius: 4px;
}

.el-main {
  background-color: #f4f6f9;
  color: #333;

  font-size: 25px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
}
.home {
  background-color: #f5f7fa;
}
.boxMainA {
  width: 1000px;
  height: 440px;
  margin: -10px auto;
  text-align: center;
  position: relative;
  top: 10px;
}
</style>